import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { StyleSheet, View } from 'react-native'
import * as Utils from '../utils/utils'

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
  },
})

export default class Arrow extends Component {
  static defaultProps = {
    vertexDeg: 90,
  }

  static propTypes = {
    vertexDeg: PropTypes.number,
    start: PropTypes.shape({
      x: PropTypes.number.isRequired,
      y: PropTypes.number.isRequired,
    }).isRequired,
    end: PropTypes.shape({
      x: PropTypes.number.isRequired,
      y: PropTypes.number.isRequired,
    }).isRequired,
    width: PropTypes.number.isRequired,
    color: PropTypes.string.isRequired,
  }

  // 构造
  constructor(props) {
    super(props)
    // 初始状态
    this.state = {}
    this._borderWidth = (props.width / 3) * 2
    this._transform = Utils.getArrowTransform(
      props.start,
      props.end,
      props.width,
      this._borderWidth,
      props.vertexDeg
    )
  }

  render() {
    return (
      <View
        style={[
          styles.container,
          {
            borderWidth: this._borderWidth,
            borderLeftColor: this.props.color,
            borderRightColor: 'transparent',
            borderTopColor: 'transparent',
            borderBottomColor: 'transparent',
            left: this._transform.origin.x,
            top: this._transform.origin.y,
            transform: [
              { translateX: this._transform.translateX },
              { translateY: this._transform.translateY },
              { rotateZ: this._transform.rotateRad + 'rad' },
            ],
          },
        ]}
      />
    )
  }
}
